<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>assan - Professional theme</title>

        <!-- Bootstrap -->
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <!-- custom css (blue color by default) -->
        <link href="css/style.css" rel="stylesheet" type="text/css" media="screen">
        <!-- custom css (green color ) -->
        <!--      <link href="css/style-green.css" rel="stylesheet" type="text/css" media="screen">-->
        <!-- custom css (red color ) -->
        <!--        <link href="css/style-red.css" rel="stylesheet" type="text/css" media="screen">-->
        <!-- custom css (yellow color ) -->
        <!--       <link href="css/style-yellow.css" rel="stylesheet" type="text/css" media="screen">-->
        <!-- custom css (sea-greean color ) -->
        <!--      <link href="css/style-sea-green.css" rel="stylesheet" type="text/css" media="screen">-->
        <!-- custom css (style-gold color ) -->
        <!--       <link href="css/style-gold.css" rel="stylesheet" type="text/css" media="screen">-->
        <!-- font awesome for icons -->
        <link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
        <!-- flex slider css -->
        <link href="css/flexslider.css" rel="stylesheet" type="text/css" media="screen">
        <!-- animated css  -->
        <link href="css/animate.css" rel="stylesheet" type="text/css" media="screen">
        <!--google fonts-->
        
        
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
        <!--owl carousel css-->
        <link href="css/owl.carousel.css" rel="stylesheet" type="text/css" media="screen">
        <link href="css/owl.theme.css" rel="stylesheet" type="text/css" media="screen">
        <!--mega menu -->
        <link href="css/yamm.css" rel="stylesheet" type="text/css">
        <!--popups css-->
        <link href="css/magnific-popup.css" rel="stylesheet" type="text/css">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->

    </head>
    <body>

        <div id="header-top" class="hidden-xs">
            <div class="container">
                <div class="top-bar">
                    <div class="pull-left sample-1right">
                        <a><i class="fa fa-phone"></i> Any questions? Call us: <span class="colored-text">+02 34543454</span> </a> 
                         <a><i class="fa fa-envelope"></i> Mail us: <span class="colored-text">Support@domain.com</span> </a>
                    </div>
                    <div class="pull-right">
                        <ul class="list-inline top-social">
                            <li>Follow us:</li>
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                            <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div><!--top bar end hidden in small devices-->
        <!--navigation -->
        <!-- Static navbar -->
        <div class="navbar navbar-default navbar-static-top yamm sticky" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html"><img src="img/logo.png" alt="ASSAN"></a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home <i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
                                <li class="dropdown-submenu">
                                    <a tabindex="-1" href="#">home - revolution </a>
                                    <ul class="dropdown-menu">
                                        <li><a href="index.html"> Full width</a></li>
                                        <li><a href="home-revolution-boxed.html">Revolution Boxed</a></li>
                                        <li><a href="home-revolution-fullscreen.html">Revolution Fullscreen</a></li>
                                        <li><a href="ken-burns.html">Ken burns Slider</a></li>
                                    </ul>
                                </li>
                                <li><a href="home-carousel.html">Home - Carousel</a></li>
                                <li><a href="home-2.html">Home - Flex slider</a></li>
                                <li><a href="home-parallax.html">Home - Parallax</a></li>
                                <li><a href="home-video.html">Home - Video</a></li>
                                <li><a href="home-boxed.html">Home - Boxed</a></li>
                                <li><a href="home-construction.html">Home - Construction</a></li>
                                <li><a href="home-portfolio.html">Home - Portfolio</a></li>
                                <li><a href="home-side-menu.html">Home - Side Menu</a></li>
                                <li><a href="home-events.html">Home - Events</a></li>                                 
                                <li><a href="home-shop.html">Home - Shop</a></li>
                                <li class="dropdown-submenu">                                     <a tabindex="-1" href="#">One Page </a>                                     <ul class="dropdown-menu">                                          <li><a href="one-page.html">One page Light</a></li>                                           <li><a href="one-page-dark.html">One page Dark</a></li>                                                                             </ul>                                 </li>
                                <li class="dropdown-submenu">
                                    <a tabindex="-1" href="#">Multi level menu </a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#"> menu level 2</a></li>
                                        <li class="dropdown-submenu">
                                            <a tabindex="-1" href="#">menu level 2 </a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#"> menu level 3</a></li>
                                                <li><a href="#"> menu level 3</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <!--menu home li end here-->
                                       <li class="dropdown">
                            <a href="#" class="dropdown-toggle " data-toggle="dropdown">Portfolio <i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu multi-level" role="menu">
                                    <li class="dropdown-submenu">
                                    <a tabindex="-1" href="#">Cube Portfolio </a>
                                    <ul class="dropdown-menu">
                                        <li><a href="juicy-portfolio.html"> Juicy Projects</a></li>
                                        <li><a href="cube-fullwidth.html"> Full Width</a></li>
                                        <li><a href="cube-masonry.html"> Masonry</a></li>                         
                                    </ul>
                                </li>
                                <li class="dropdown-submenu">
                                    <a tabindex="-1" href="#">Grid Text Boxed </a>
                                    <ul class="dropdown-menu">
                                        <li><a href="portfolio-2.html"> 2 Columns</a></li>
                                        <li><a href="portfolio-3.html"> 3 Columns</a></li>
                                        <li><a href="portfolio-4.html"> 4 Columns</a></li>                         

                                    </ul>
                                </li>
                                <li class="dropdown-submenu">
                                    <a tabindex="-1" href="#">Grid Boxed </a>
                                    <ul class="dropdown-menu">
                                        <li><a href="grid-portfolio-2-no-text.html">2 Columns</a></li>
                                        <li><a href="grid-portfolio-3-no-text.html">3 Columns</a></li>
                                        <li><a href="grid-portfolio-4-no-text.html">4 Columns</a></li>                         

                                    </ul>
                                </li>
                                <li class="dropdown-submenu">
                                    <a tabindex="-1" href="#">No space Full width </a>
                                    <ul class="dropdown-menu">
                                        <li><a href="portfolio-full-width-2.html">2 columns</a></li>
                                        <li><a href="portfolio-full-width-3.html">3 columns</a></li>
                                        <li><a href="portfolio-full-width-4.html">4 columns</a></li>                         
                                        <li><a href="portfolio-full-width-5.html">5 columns</a></li>
                                    </ul>
                                </li>
                                <li class="dropdown-submenu">
                                    <a tabindex="-1" href="#">No Space Boxed </a>
                                    <ul class="dropdown-menu">
                                        <li><a href="portfolio-no-space-bx-2.html"> 2 Columns</a></li>
                                        <li><a href="portfolio-no-space-bx-3.html"> 3 Columns</a></li>
                                        <li><a href="portfolio-no-space-bx-4.html"> 4 Columns</a></li>                         

                                    </ul>
                                </li>
                                <li class="dropdown-submenu">
                                    <a tabindex="-1" href="#">Portfolio Masonry </a>
                                    <ul class="dropdown-menu">
                                        <li><a href="masonry-portfolio-3.html"> 3 Columns</a></li>
                                        <li><a href="masonry-portfolio-4.html"> 4 Columns</a></li>
                                        <li><a href="masonry-portfolio-full.html"> Full Width</a></li>                         

                                    </ul>
                                </li>
                                <li class="dropdown-submenu">
                                    <a tabindex="-1" href="#">Portfolio Items</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="portfolio-single.html">Single item</a></li>
                                        <li><a href="portfolio-single-2.html">Single item 2</a></li>                                                             
                                    </ul>
                                </li>

                            </ul>
                        </li>
                        <!--menu Portfolio li end here-->
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog <i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="blog-full.html">Blog - full width</a></li>
                                <li><a href="blog-leftimg.html">Blog - left image</a></li>
                                <li><a href="blog-sidebar.html">Blog - sidebar</a></li>
                                <li><a href="blog-2col.html">Blog - 2 column</a></li>
                                <li><a href="blog-timeline.html">Blog - Timeline</a></li>
                                <li><a href="blog-masonary.html">Blog - Masonry</a></li>
                                <li><a href="blog-single.html">Blog - Single</a></li>
                            </ul>
                        </li>
                        <!--menu blog li end here-->
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="about.html">About</a></li>
                                <li><a href="me.html">About - Me</a></li>

                                <li><a href="services.html">Services</a></li>
                                <li><a href="team.html">Our Team</a></li>
                                <li><a href="pricing.html">Our Pricing</a></li>                                
                                <li><a href="faq.html">FAQS</a></li>
                               <li><a href="email-template.html">Email Template</a></li>
                                <li class="dropdown-submenu">
                                    <a tabindex="-1" href="#">Contact </a>
                                    <ul class="dropdown-menu">
                                        <li><a href="contact.html"> Contact default</a></li>
                                        <li><a href="contact-advanced.php">Contact advanced</a></li>
                                        <li><a href="contact-option.php">Contact option</a></li>
                                        <li><a href="contact-flat.php">Contact Flat</a></li>
                                    </ul>
                                </li>                                          
                                <li><a href="search-results.html">Search Results</a></li>                                
                                <li><a href="career.html">Career</a></li>
                                <li><a href="gallery.html">Gallery</a></li>
                                <li><a href="invoice.html">Invoice</a></li>
                                <li><a href="process.html">Our Process</a></li><li><a href="site-map.html">Site Map</a></li>
                            </ul>
                        </li>
                        <!--menu pages li end here-->
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Shop <i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu" role="menu">                              
                                <li><a href="shop-2col.html">2 columns sidebar</a></li>
                                <li><a href="shop-3col.html">3 columns sidebar</a></li>
                                <li><a href="shop-4col.html">4 columns full width</a></li>
                                <li><a href="product-list.html">Product list</a></li>
                                <li><a href="product-detail.html">Single product</a></li>
                                <li><a href="cart.html">Shopping cart</a></li>                                
                                <li><a href="checkout.html">Checkout</a></li>
                                <li><a href="shop-login.html">Login</a></li>
                                <li><a href="shop-register.html">Register</a></li>

                            </ul>
                        </li> <!--menu Shop li end here-->
                        <!--mega menu-->
                        <li class="dropdown yamm-fw active">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Features  <i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <div class="yamm-content">
                                        <div class="row">

                                            <div class="col-sm-3">
                                                <h3 class="heading">headers & Footers</h3>
                                                <ul class="nav mega-vertical-nav">        
                                                    <li><a href="index.html">Header 1 - Default</a></li>
                                                    <li><a href="header-dark.html">Header 2 - dark </a></li>
                                                    <li><a href="header-transparent.html">header 3 - transparent </a></li>
                                                    <li><a href="header-center-logo.html">header 4 - Logo center </a></li>
                                                    
                                                    <li><a href="index.html">Footer - 1</a></li>
                                                    <li><a href="footer-2.html">Footer - 2</a></li>
                                                    <li><a href="footer-3.html">Footer - 3 </a></li>
                                                </ul>

                                            </div>
                                            <div class="col-sm-3">
                                                <h3 class="heading">Layout grids </h3>
                                                <ul class="nav mega-vertical-nav">
                                                    <li><a href="full-width.html">Full Width</a></li>
                                                    
                                                    <li><a href="left-sidebar.html">Left Sidebar</a></li>
                                                    <li><a href="right-sidebar.html">Right sidebar</a></li>
                                                    <li><a href="both-sidebar.html">Both Sidebar</a></li>
                                                    <li><a href="both-right-sidebar.html">Both Right sidebar</a></li>
                                                    <li><a href="both-left-sidebar.html">Both Left Sidebar</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-sm-3">
                                                <h3 class="heading">Features</h3>
                                                <ul class="nav mega-vertical-nav">
                                                    <li><a href="typography.html">Typography</a></li>
                                                    <li><a href="element.html">Elements</a></li>                                                   
                                                    <li><a href="home-soon.html">Coming Soon</a></li>   
                                                    <li><a href="side-nav.html">side navigation </a></li> 
                                                    <li><a href="testimonials.html">testimonials </a></li> 
                                                </ul>
                                            </div>
                                            <div class="col-sm-3">
                                                <h3 class="heading">MISCELLANEOUS</h3>
                                                <ul class="nav mega-vertical-nav">
                                                    <li><a href="maintenance-page.html">Maintenance page </a></li>
                                                    <li><a href="blank.html">Blank Page</a></li>
                                                    <li><a href="error.html">Error - 404</a></li>
                                                    <li><a href="login-ragister.html">Login / Register</a></li>
                                                    <li><a href="login-ragister-classic.html">Login / Register - Classic </a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li> <!--menu Features li end here-->
                        <!--mega menu end-->    

                        <li class="dropdown " data-animate="animated fadeInUp" style="z-index:500;">
                            <a href="#" class="dropdown-toggle " data-toggle="dropdown"><i class="fa fa-search"></i></a>
                            <ul class="dropdown-menu search-dropdown animated fadeInUp">
                                <li id="dropdownForm">
                                    <div class="dropdown-form">
                                        <form class=" form-inline">
                                            <div class="input-group">
                                                <input type="text" class="form-control" placeholder="search...">
                                                <span class="input-group-btn">
                                                    <button class="btn btn-theme-bg" type="button">Go!</button>
                                                </span>
                                            </div><!--input group-->
                                        </form><!--form-->
                                    </div><!--.dropdown form-->
                                </li><!--.drop form search-->
                            </ul><!--.drop menu-->
                        </li> <!--menu search li end here-->
                        <li class="dropdown">
                            <a href="#" class=" dropdown-toggle" data-toggle="dropdown"><i class="fa fa-lock"></i></a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-login-box animated fadeInUp">
                                <form role="form">
                                    <h4>Signin</h4>

                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                            <input type="text" class="form-control" placeholder="Username">
                                        </div>
                                        <br>
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                                            <input type="password" class="form-control" placeholder="Password">
                                        </div>
                                        <div class="checkbox pull-left">
                                            <label>
                                                <input type="checkbox"> Remember me
                                            </label>
                                        </div>
                                        <a class="btn btn-theme-bg pull-right">Login</a>
                                        <!--                                        <button type="submit" class="btn btn-theme pull-right">Login</button>                 -->
                                        <div class="clearfix"></div>
                                        <hr>
                                        <p>Don't have an account! <a href="#">Register Now</a></p>
                                    </div>
                                </form>
                            </div>
                        </li> <!--menu login li end here-->
                    </ul>
                </div><!--/.nav-collapse -->
            </div><!--container-->
        </div><!--navbar-default-->
        <!--carousel slider-->
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Carousel indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>   
            <!-- Carousel items -->
            <div class="carousel-inner">
                <div class="item item-c-slide active">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-12 text-center slide-text">
                                <h1 class="animated slideInLeft delay-1">Welcome</h1>
                                <div class="divide15"></div>
                                <p class="animated slideInLeft delay-2">We are a creative agency in web design</p>
                                <div class="divide15"></div>
                                <p class="animated slideInLeft delay-3"><a href="#" class="btn btn-lg btn-theme-bg"> Take Tour</a></p>
                            </div>
                        </div>
                    </div>
                </div><!--item-->
                <div class="item item-c-slide">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-12 text-center slide-text">
                                <p class="animated slideInLeft delay-1">Create your Amazing</p>
                                <div class="divide15"></div>
                                <h1 class="animated slideInLeft delay-2">Portfolio</h1>
                                <div class="divide15"></div>
                                <p class="animated slideInLeft delay-3"><a href="#" class="btn btn-lg btn-theme-bg"> View Portfolio</a></p>
                            </div>
                        </div>
                    </div>
                </div><!--item-->
                <div class="item item-c-slide">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-12 text-center slide-text">
                                <p class="animated slideInLeft delay-1">We are truly </p>
                                <div class="divide15"></div>
                                <h1 class="animated slideInLeft delay-2">Creative</h1>
                                <div class="divide15"></div>
                                <p class="animated slideInLeft delay-3"><a href="#" class="btn btn-lg btn-theme-bg"> Hire us</a></p>
                            </div>
                        </div>
                    </div>
                </div><!--item-->
            </div><!--carousel inner-->
            <!-- Carousel nav -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">
                <i class="fa fa-angle-left"></i>
            </a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">
                <i class="fa fa-angle-right"></i>
            </a>
        </div><!--carousel slider-->

        <section class="intro-text">
            <div class="container ">
                <div class="row">
                    <div class="col-md-12 col-sm-12 text-center">
                        <h2 class="wow animated fadeInDown">We are a <span class="colored-text">Creative Team</span></h2>
                        <p class="lead animated fadeIn">
                            We are a creative team and make great web things since 2001 based in california.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum, nulla vel pellentesque consequat, ante nulla hendrerit arcu, ac tincidunt mauris lacus sed leo. vamus suscipit molestie vestibulum.
                        </p>
                        <div class="divide30"></div>
                        <a href="#" class=" btn border-theme btn-lg">View Our Portfolio</a>
                        <a href="#" class=" btn border-black btn-lg">Contact us today</a>
                    </div>
                </div>
            </div>
        </section><!--intro section end-->


        <section class="services-wrap">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="center-heading">
                            <h2>What We Offer</h2>
                            <span class="center-line"></span>
                        </div>
                    </div>                   
                </div><!--center heading row-->
                <div class="row">
                    <div class="col-md-4 col-sm-6 margin20">
                        <div class="services-box wow animated fadeInUp" data-wow-duration="700ms" data-wow-delay="100ms">
                            <div class="services-box-icon">
                                <i class="fa fa-pencil"></i>
                            </div><!--services icon-->
                            <div class="services-box-info">
                                <h4>Web &AMP; Graphics Design</h4>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing metus. elit. Quisque rutrum pellentesque imperdiet.
                                </p>
                            </div>
                        </div><!--services box-->
                    </div><!--services col-->
                    <div class="col-md-4 col-sm-6 margin20">
                        <div class="services-box wow animated fadeInUp" data-wow-duration="700ms" data-wow-delay="200ms">
                            <div class="services-box-icon">
                                <i class="fa fa-globe"></i>
                            </div><!--services icon-->
                            <div class="services-box-info">
                                <h4>Web Development</h4>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing metus. elit. Quisque rutrum pellentesque imperdiet.
                                </p>
                            </div>
                        </div><!--services box-->
                    </div><!--services col-->
                    <div class="col-md-4 col-sm-6 margin20">
                        <div class="services-box wow animated fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
                            <div class="services-box-icon">
                                <i class="fa fa-users"></i>
                            </div><!--services icon-->
                            <div class="services-box-info">
                                <h4>Customer Support</h4>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing metus. elit. Quisque rutrum pellentesque imperdiet.
                                </p>
                            </div>
                        </div><!--services box-->
                    </div><!--services col-->

                    <div class="col-md-4 col-sm-6 margin20">
                        <div class="services-box wow animated fadeInUp" data-wow-duration="700ms" data-wow-delay="400ms">
                            <div class="services-box-icon">
                                <i class="fa fa-crop"></i>
                            </div><!--services icon-->
                            <div class="services-box-info">
                                <h4>Pixel perfect design</h4>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing metus. elit. Quisque rutrum pellentesque imperdiet.
                                </p>
                            </div>
                        </div><!--services box-->
                    </div><!--services col-->
                    <div class="col-md-4 col-sm-6 margin20">
                        <div class="services-box wow animated fadeInUp" data-wow-duration="700ms" data-wow-delay="500ms">
                            <div class="services-box-icon">
                                <i class="fa fa-twitter"></i>
                            </div><!--services icon-->
                            <div class="services-box-info">
                                <h4>bootstrap 3.3.4</h4>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing metus. elit. Quisque rutrum pellentesque imperdiet.
                                </p>
                            </div>
                        </div><!--services box-->
                    </div><!--services col-->
                    <div class="col-md-4 col-sm-6 margin20">
                        <div class="services-box wow animated fadeInUp" data-wow-duration="700ms" data-wow-delay="600ms">
                            <div class="services-box-icon">
                                <i class="fa fa-flag"></i>
                            </div><!--services icon-->
                            <div class="services-box-info">
                                <h4>Font Awesome icons</h4>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing metus. elit. Quisque rutrum pellentesque imperdiet.

                                </p>

                            </div>
                        </div><!--services box-->
                    </div><!--services col-->
                </div><!--services row-->
            </div>
        </section><!--section services-->
        <div class="divide40"></div>
        <section class="portfolio">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="center-heading">
                            <h2>Recent work</h2>
                            <span class="center-line"></span>
                        </div>
                    </div>                   
                </div><!--center heading row-->
                <div class="row">
                    <div class="col-md-12">
                        <div id="work-carousel" class="owl-carousel owl-spaced">
                            <div>

                                <div class="item-img-wrap ">
                                    <img src="img/img-1.jpg" class="img-responsive" alt="workimg">
                                    <div class="item-img-overlay">
                                        <a href="img/img-1.jpg" class="show-image">
                                            <span></span>
                                        </a>
                                    </div>
                                </div> <!--item img wrap-->
                                <div class="work-desc">
                                    <h3><a href="portfolio-single.html">woo Commerce</a></h3>
                                    <span>Magento</span>
                                </div><!--work desc-->
                            </div><!--owl item-->
                            <div> 
                                <div class="item-img-wrap ">
                                    <img src="img/img-2.jpg" class="img-responsive" alt="workimg">
                                    <div class="item-img-overlay">
                                        <a href="img/img-2.jpg" class="show-image">
                                            <span></span>
                                        </a>
                                    </div>
                                </div> 
                                <div class="work-desc">
                                    <h3><a href="portfolio-single.html">Web Develop</a></h3>
                                    <span>Php / Wordpress</span>
                                </div><!--work desc-->
                            </div><!--owl item-->
                            <div> 
                                <div class="item-img-wrap ">
                                    <img src="img/img-3.jpg" class="img-responsive" alt="workimg">
                                    <div class="item-img-overlay">
                                        <a href="img/img-3.jpg" class="show-image">
                                            <span></span>
                                        </a>
                                    </div>
                                </div> 
                                <div class="work-desc">
                                    <h3><a href="portfolio-single.html">Web Design</a></h3>
                                    <span>HTML5 / CSS3</span>
                                </div><!--work desc-->
                            </div><!--owl item-->
                            <div> 
                                <div class="item-img-wrap ">
                                    <img src="img/img-4.jpg" class="img-responsive" alt="workimg">
                                    <div class="item-img-overlay">
                                        <a href="img/img-4.jpg" class="show-image">
                                            <span></span>
                                        </a>
                                    </div>
                                </div> 
                                <div class="work-desc">
                                    <h3><a href="portfolio-single.html">Graphics Design</a></h3>
                                    <span>Corel Drow</span>
                                </div><!--work desc-->
                            </div><!--owl item-->
                            <div> 
                                <div class="item-img-wrap ">
                                    <img src="img/img-5.jpg" class="img-responsive" alt="workimg">
                                    <div class="item-img-overlay">
                                        <a href="img/img-5.jpg" class="show-image">
                                            <span></span>
                                        </a>
                                    </div>
                                </div> 
                                <div class="work-desc">
                                    <h3><a href="portfolio-single.html">Psd Design</a></h3>
                                    <span>Photoshop</span>
                                </div><!--work desc-->
                            </div><!--owl item-->
                            <div> 
                                <div class="item-img-wrap ">
                                    <img src="img/img-6.jpg" class="img-responsive" alt="workimg">
                                    <div class="item-img-overlay">
                                        <a href="img/img-6.jpg" class="show-image">
                                            <span></span>
                                        </a>
                                    </div>
                                </div> 
                                <div class="work-desc">
                                    <h3><a href="portfolio-single.html">Logo Design</a></h3>
                                    <span>Illustrate</span>
                                </div><!--work desc-->
                            </div><!--owl item-->
                        </div>
                    </div>
                </div><!--row-->
                <div class="divide30"></div>
                <div class="row">
                    <div class="col-md-12 text-center">
                        <a href="#" class="btn border-theme btn-lg wow animated fadeInUp"><i class="fa fa-bars"></i> Load More Projects</a>
                    </div>
                </div>
            </div><!--container-->
        </section><!--recent work section -->
        <div class="divide80"></div>
        <div class="container">
            <div class="row">
                <div class="col-sm-5">
                    <h3 class="heading">About Company</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula.
                    </p>
                </div>
                <div class="col-sm-7">
                    <div class="skills-wrapper wow animated bounceIn animated" data-wow-delay="0.2s">
                        <h3 class="heading-progress">Web Design <span class="pull-right">88%</span></h3>
                        <div class="progress">
                            <div class="progress-bar" style="width: 88%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="88" role="progressbar">
                            </div>
                        </div>
                        <h3 class="heading-progress">Web Development <span class="pull-right">78%</span></h3>
                        <div class="progress">
                            <div class="progress-bar" style="width: 78%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="78" role="progressbar">
                            </div>
                        </div>
                        <h3 class="heading-progress">Marketing <span class="pull-right">82%</span></h3>
                        <div class="progress">
                            <div class="progress-bar" style="width: 82%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="82" role="progressbar">
                            </div>
                        </div>                    
                    </div><!--skills-->
                </div>
            </div>
        </div><!--about and progress section end-->
        <div class="divide80"></div>
        <section class="testimonials parallax" data-stellar-background-ratio="0.5">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="center-heading">
                            <h2>clients Says</h2>
                            <span class="center-line"></span>
                        </div>
                    </div>                   
                </div><!--center heading row-->
                <div class="row">
                    <div class="col-md-8 col-md-offset-2 text-center">
                        <div id="testi-carousel" class="owl-carousel owl-spaced">
                            <div>
                                <img src="img/customer-1.jpg" class="img-responsive customer-img" alt="">
                                <h4>
                                    <i class="fa fa-quote-left"></i> Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
                                </h4>
                                <p>-David</p>
                            </div><!--testimonials item like paragraph-->
                            <div>
                                <img src="img/customer-2.jpg" class="img-responsive customer-img" alt="">
                                <h4>
                                    <i class="fa fa-quote-left"></i>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia.
                                </h4>
                                <p>-James</p>
                            </div><!--testimonials item like paragraph-->
                            <div>
                                <img src="img/customer-3.jpg" class="img-responsive customer-img" alt="">
                                <h4>
                                    <i class="fa fa-quote-left"></i>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia.
                                </h4>
                                <p>-Jesica</p>
                            </div><!--testimonials item like paragraph-->
                        </div>
                    </div>
                </div>
            </div>
        </section><!--testimonials-->
        <section id="services-bg-wrap">
            <div class="container">
                <div class="row">
                    <div class="col-md-4 hidden-sm wow animated fadeInLeft">
                        <img src="img/mockup-ipad.png" class="img-responsive" alt="mockup">
                    </div>
                    <div class="col-md-8  col-xs-12 service-3-meta">
                        <h1 class="wow animated fadeInDownfadeInRight">Core features of <span class="colored-text">assan</span></h1>
                        <div class="services-box margin30 wow animated fadeInRight">
                            <div class="services-box-icon">
                                <i class="fa fa-tablet"></i>
                            </div><!--services icon-->
                            <div class="services-box-info">
                                <h4>Fully Responsive</h4>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing metus. elit. Quisque rutrum pellentesque imperdiet.
                                </p>
                            </div>
                        </div><!--service box-->
                        <div class="services-box margin30 wow animated fadeInRight">
                            <div class="services-box-icon">
                                <i class="fa fa-twitter"></i>
                            </div><!--services icon-->
                            <div class="services-box-info">
                                <h4>bootstrap 3.3.4</h4>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing metus. elit. Quisque rutrum pellentesque imperdiet.
                                </p>
                            </div>
                        </div><!--service box-->

                        <div class="services-box margin30 wow animated fadeInRight">
                            <div class="services-box-icon">
                                <i class="fa fa-code"></i>
                            </div><!--services icon-->
                            <div class="services-box-info">
                                <h4>80+ valid HTML5 Pages and much more...</h4>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing metus. elit. Quisque rutrum pellentesque imperdiet.
                                </p>
                            </div>
                            <div class="divide30"></div>
                            <p><a href="#" class="btn btn-theme-dark btn-lg">Purchase Now</a></p>
                        </div><!--service box-->
                    </div>
                </div>
            </div> 
        </section><!--services with the showcase mockups-->
        <section id="clients-carousel">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="center-heading">
                            <h2>Trusted worldwide</h2>
                            <span class="center-line"></span>
                            <p class="lead">
                                Lorem ipsum dolor sit amet, consectetur adipiscing metus. elit. Quisque rutrum pellentesque imperdiet.
                            </p>
                        </div>
                    </div>                   
                </div><!--center heading row-->
                <div id="clients-slider">       
                    <div class="item"><a href="#"><img src="img/cl-1.png" alt=""></a></div>
                    <div class="item"><a href="#"><img src="img/cl-2.png" alt=""></a></div>
                    <div class="item"><a href="#"><img src="img/cl-3.png" alt=""></a></div>
                    <div class="item"><a href="#"><img src="img/cl-4.png" alt=""></a></div>
                    <div class="item"><a href="#"><img src="img/cl-5.png" alt=""></a></div>
                </div>
            </div>
        </section><!--clients carousel end-->
        <section id="cta-1">
            <div class="container">
                <h1>Do you have a project or idea?</h1>
                <a href="#" class="btn border-white btn-lg">Join us today</a>
            </div>
        </section>
        <div class="divide80"></div>
        <div class="container">

            <div class="row">
                <div class="col-md-7 margin40">
                    <h3 class="heading">Latest News</h3>
                    <div id="news-carousel" class="owl-carousel owl-spaced">
                        <div>
                            <a href="#">
                                <div class="item-img-wrap">
                                    <img src="img/img-8.jpg" class="img-responsive" alt="workimg">
                                    <div class="item-img-overlay">
                                        <span></span>
                                    </div>
                                </div>                       
                            </a><!--news link--> 
                            <div class="news-desc">
                                <span>Sports</span>
                                <h4><a href="#">Lorem ipsum dollor Sit amet</a></h4>
                                <span>By <a href="#">Author</a> on 24 july 2014</span> <span><a href="#">Read more...</a></span>
                            </div><!--news desc-->
                        </div> 
                        <div>
                            <a href="#">
                                <div class="item-img-wrap">
                                    <img src="img/img-7.jpg" class="img-responsive" alt="workimg">
                                    <div class="item-img-overlay">
                                        <span></span>
                                    </div>
                                </div>                       
                            </a><!--news link--> 
                            <div class="news-desc">
                                <span>Sports</span>
                                <h4><a href="#">Lorem ipsum dollor Sit amet</a></h4>
                                <span>By <a href="#">Author</a> on 24 july 2014</span> <span><a href="#">Read more...</a></span>
                            </div><!--news desc-->
                        </div> 
                        <div>
                            <a href="#">
                                <div class="item-img-wrap">
                                    <img src="img/img-6.jpg" class="img-responsive" alt="workimg">
                                    <div class="item-img-overlay">
                                        <span></span>
                                    </div>
                                </div>                       
                            </a><!--news link--> 
                            <div class="news-desc">
                                <span>Sports</span>
                                <h4><a href="#">Lorem ipsum dollor Sit amet</a></h4>
                                <span>By <a href="#">Author</a> on 24 july 2014</span> <span><a href="#">Read more...</a></span>
                            </div><!--news desc-->
                        </div> 
                        <div>
                            <a href="#">
                                <div class="item-img-wrap">
                                    <img src="img/img-5.jpg" class="img-responsive" alt="workimg">
                                    <div class="item-img-overlay">
                                        <span></span>
                                    </div>
                                </div>                       
                            </a><!--news link--> 
                            <div class="news-desc">
                                <span>Sports</span>
                                <h4><a href="#">Lorem ipsum dollor Sit amet</a></h4>
                                <span>By <a href="#">Author</a> on 24 july 2014</span> <span><a href="#">Read more...</a></span>
                            </div><!--news desc-->
                        </div> 
                    </div>
                </div><!--col 7 end use for latest news owl carousel slide-->
                <div class="col-md-5 margin20">
                    <h3 class="heading">Why Us?</h3>
                    <!--bootstrap collapse-->
                    <div class="panel-group" id="accordion">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                        <i class="fa fa-desktop"></i>    100% Responsive Design
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseOne" class="panel-collapse collapse in">
                                <div class="panel-body">
                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor.
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                        <i class="fa fa-crop"></i>    Pixel Perfect Design 
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse">
                                <div class="panel-body">
                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                                        <i class="fa fa-cogs"></i>    Full Support
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseThree" class="panel-collapse collapse">
                                <div class="panel-body">
                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--collapse end-->
                </div>
            </div>
        </div><!--latest news and why us container end-->

        <div class="divide60"></div>
        <footer id="footer">
            <div class="container">

                <div class="row">
                    <div class="col-md-6 col-md-offset-3 text-center margin30">
                        <div class="footer-col footer-3">
                            <h3>assan</h3>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lorem quam, adipiscing condimentum tristique vel, eleifend sed turpis. Pellentesque cursus arcu id magna euismod in elementum purus molestie.
                            </p>
                            <ul class="list-inline social-1">
                                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                                <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                            </ul>
                        </div>                        
                    </div><!--footer col-->
          
             
                   

                </div>
                <div class="row">
                    <div class="col-md-12 text-center">
                        <div class="footer-btm">
                            <span>&copy;2014. Theme by Design_mylife</span>
                        </div>
                    </div>
                </div>
            </div>
        </footer><!--default footer end here-->
         <!--scripts and plugins -->
        <!--must need plugin jquery-->
        <script src="js/jquery.min.js"></script>        
        <!--bootstrap js plugin-->
        <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>       
        <!--easing plugin for smooth scroll-->
        <script src="js/jquery.easing.1.3.min.js" type="text/javascript"></script>
        <!--sticky header-->
        <script type="text/javascript" src="js/jquery.sticky.js"></script>
        <!--flex slider plugin-->
        <script src="js/jquery.flexslider-min.js" type="text/javascript"></script>
        <!--parallax background plugin-->
        <script src="js/jquery.stellar.min.js" type="text/javascript"></script>
        
        
        <!--digit countdown plugin-->
        <script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
        <!--digit countdown plugin-->
        <script src="js/jquery.counterup.min.js" type="text/javascript"></script>
        <!--on scroll animation-->
        <script src="js/wow.min.js" type="text/javascript"></script> 
        <!--owl carousel slider-->
        <script src="js/owl.carousel.min.js" type="text/javascript"></script>
        <!--popup js-->
        <script src="js/jquery.magnific-popup.min.js" type="text/javascript"></script>
        <!--you tube player-->
        <script src="js/jquery.mb.YTPlayer.min.js" type="text/javascript"></script>
        
        
        <!--customizable plugin edit according to your needs-->
        <script src="js/custom.js" type="text/javascript"></script>

    </body>
</html>
